<template>
    <div ref="container"></div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import echarts from 'echarts';
    import {Component,Prop, Watch} from 'vue-property-decorator';


    @Component
    export default class PieChart extends Vue {
        @Prop() currentType!:string;
        @Prop() selectedYear!:string;

        pieOption:object =  {
            tooltip: {
                trigger: 'item'
            },
            color:['#5470c6', '#fac858', '#fc8452', '#9a60b4', '#ea7ccc'],
            series: [
                {
                    name: '金额',
                    type: 'pie',
                    radius: '50%',
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 0. 获取全部明细记录与当前需要的标签
        created(){
            this.$store.commit('getRecordList');
        };

        get recordList(){
            return this.$store.state.recordList;
        };
        
        // 1.根据统计类型和年份计算饼状图所需的数据
        get pieData(){
            
            if(this.currentType === 'w'){
                let expense = 0;
                let income = 0;
                let expenseList = this.recordList.filter((r:RecordItem)=>r.type === '-' && r.createdAt?.substr(0,4) === this.selectedYear);
                let incomeList = this.recordList.filter((r:RecordItem)=>r.type === '+' && r.createdAt?.substr(0,4) === this.selectedYear);
                
                if(expenseList.length !== 0){
                    expense = expenseList.map((r:RecordItem)=>r.amount)
                        .reduce((prev:number,cur:number)=> prev+cur);
                };

                if(incomeList.length !== 0){
                    income = incomeList.map((r:RecordItem)=>r.amount)
                        .reduce((prev:number,cur:number)=> prev+cur);
                };
                return [{value: expense, name: '支出'},{value: income, name: '收入'}];
            }else {
                let currentRecordList = this.recordList.filter((r:RecordItem)=>r.type === this.currentType && r.createdAt?.substr(0,4) === this.selectedYear);
                if (currentRecordList.length === 0){
                    return [{value: 0, name: '金额'}];
                }
                this.$store.commit('getTagList',this.currentType);
                let currentTagList = this.$store.state.currentTagList;
                let result:Object[] = [];
                for(let i = 0; i < currentTagList.length; i++){
                    let currentTagRecord = currentRecordList.filter((r:RecordItem)=>r.tagIndex === i);
                    if(currentTagRecord.length === 0){
                        continue;
                    };
                    let sum = currentTagRecord.map((r:RecordItem)=>r.amount)
                        .reduce((prev:number,cur:number)=> prev+cur); 
                    result.push({value: sum, name: currentTagList[i].label});
                }
                return result;
            }
        };

        mounted(){ 
            let container = this.$refs.container as HTMLDivElement;
            const width = document.documentElement.clientWidth;
            if(width >= 500){
                container.style.width = `${500-40}px`;
                container.style.height = `${500*0.65}px`;               
            }else {
                container.style.width = `${width-40}px`;
                container.style.height = `${width*0.65}px`;
            }
            let chart = echarts.init(container);
            chart.setOption(this.pieOption);
            chart.setOption({series: [{data: this.pieData}]});
        };

        @Watch('pieData')
        refreshChart(pieData:object[]){
            let chart = echarts.init(this.$refs.container as HTMLDivElement);
            chart.setOption({series: [{data: this.pieData}]});
        }


    }
</script>
